<template>
	<view class="group-list">
		<view class="group">
			<text class="type-name" v-text="groupData.type_name"></text>
			<navigator class="more" :url="'/pages/list/list?id='+groupData.type_id" v-if="groupData.type_id">
				<text>更多&gt;</text>
			</navigator>
		</view>
		<view class="list">
			<navigator :url="'/pages/detail/detail?id='+item.vod_id" class="item" v-for="(item,index) in groupData.list" :key="index">
				<image :src="item.vod_pic" class="pic"></image>
				<text class="name" v-text="item.vod_name"></text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: ['groupData']
	}
</script>

<style scoped>
	.group-list {}

	.group-list .group {
		padding: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.group-list .group .type-name {
		font-size: 30rpx;
		font-weight: 600;
	}

	.group-list .group .more {
		font-size: 22rpx;
	}

	.group-list .list {
		display: flex;
		flex-wrap: wrap;
		padding-left: 25rpx;
		padding-right: 25rpx;
	}

	.group-list .list .item {
		width: calc(calc(100% / 3) - 20rpx);
		margin: 10rpx;
		padding-bottom: 15rpx;
	}

	.group-list .list .item .pic {
		width: 220rpx;
		height: 350rpx;
		background: url(../static/images/image_loading.png) no-repeat center center;
		background-size: cover;
	}

	.group-list .list .item .name {
		font-size: 25rpx;
	}
</style>
